<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>flex讲解</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="css/demo.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1464432429_9014297.css">
</head>
<body>
<div class="allWrap ub ub-ver">
	
<div class="ub-f1 main" id="main">
<div id="main-in">
    <div id="contWrap">

	</div>
    </div>
	<div id="textTip" style="text-align:center;padding:1rem;color:#999;">
		
	</div>
    
    
</div>

</div>

</div>	
<script id="tel" type="text/html">

<% for(var i in data){ %>
				<div class="titem ub">
				<div class="timg">
					<img src="<%=data[i].img%>">
				</div>
				<div class="rinfo ub ub-ver">
					<p class="title"><%=data[i].title%></p>
					<p class="qian">￥<%=data[i].qian%></p>
					<div class="ub ub-ae ub-con bottom">
						<p>运费<%=data[i].yf%></p> <p><%=data[i].ll%></p> <p><%=data[i].add%></p>
					</div>
				</div>
			</div>
				<%}%>
</script>
<script type="text/javascript" src="jquery.js"></script>	
<script type="text/javascript" src="template.js"></script>	
<script type="text/javascript">
	var res={
		code:"SUCCESS",
		info:"成功请求",
		data:[
			{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB1bfDaMpXXXXcRXFXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"69",
				yf:"10",
				ll:"4.8万",
				add:"北京",
			},
						{

				img:"http://gw1.alicdn.com/bao/uploaded/i4/TB1OHkCKFXXXXaUXFXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"169",
				yf:"10",
				ll:"4.8万",
				add:"上海",
			},
						{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB1pIfuJpXXXXakaXXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"469",
				yf:"10",
				ll:"4.8万",
				add:"杭州",
			},
						{

				img:"http://gw1.alicdn.com/bao/uploaded/i1/TB1Pc67JVXXXXcUXXXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"695",
				yf:"10",
				ll:"4.8万",
				add:"广州",
			},
						{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB18O06MXXXXXX9XpXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"6459",
				yf:"10",
				ll:"4.8万",
				add:"东莞",
			},
												{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB18O06MXXXXXX9XpXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"6459",
				yf:"10",
				ll:"4.8万",
				add:"东莞",
			},
									{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB18O06MXXXXXX9XpXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"6459",
				yf:"10",
				ll:"4.8万",
				add:"东莞",
			},
									{

				img:"http://gw3.alicdn.com/bao/uploaded/i3/TB18O06MXXXXXX9XpXXXXXXXXXX_!!0-item_pic.jpg_100x100.jpg",
				title:"小米旗舰店正品手机平板通用迷你充电宝 移动电源10000毫安大容量",
				qian:"6459",
				yf:"10",
				ll:"4.8万",
				add:"东莞",
			}

		]
	}
$('#contWrap').html(template('tel',res))
	var main=$('#main');
	var mainIn=$('#main-in');
	var loading=false;
	var textTip=$('#textTip');
	var p=1;
	main.scroll(function() {
		if($(this).scrollTop()+main.height()>=mainIn.height()-10&&!loading){
			loading=true;
			$.post('/api/dynamic/time',{p:p},function(data){
				if(data.code=="SUCCESS"){
					$('#contWrap').append(template('tel',data))
					loading=false;
					p++;
				}else if(data.code=="NO_DATA"){
					textTip.html(data.info);
					main.unbind('scroll');
				}
				
			},'json')
		}
	})
	

</script>
</body>
</html>